<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./main.xhtml">

            <ui:define name="content">
                <div id="body">
                <p:outputPanel autoUpdate="true">
                <p:commandButton id="verPedido" value="Ver pedido actual" type="button"/>
                
                <p:overlayPanel for="verPedido">
                    <div class="content">
                        <div>
                            <div>
                                <h1>PEDIDOS</h1>
                                <p:commandButton value="Guardar" action="#{pedidoBean.savePedido}"/>
                                <p>Cliente <p:inputText value="#{pedidoBean.pedido.cliente}"/></p>
                                <p>Mesa <p:inputText value="#{pedidoBean.pedido.mesa}"/></p>
                                <p:dataTable value="#{pedidoBean.pedido.items}" var="i">
                                    <p:column headerText="PRODUCTO">
                                        <h:outputText value="#{i.cantidad} #{i.producto.descripcion}"/>
                                    </p:column>                                    
                                    <p:column headerText="TOTAL">
                                        <h:outputText value="#{i.cantidad * i.producto.precio}"/>
                                    </p:column>
                                </p:dataTable>
                                
                            </div>
                        </div>
                    </div>
                    
                </p:overlayPanel>
                
                
		<div class="content">
			<div>
				<div>
                                    <h1>#{menuBean.selected.descripcion}</h1>
					<!--<div> <a href="burger.html"><img src="images/burger.jpg" width="434" height="288" alt=""/></a> </div>-->
					<ul>
                                            <ui:repeat value="#{menuBean.selected.products}" var="p">
                                                <li>
                                                    <h2><p:commandLink value="#{p.descripcion}" action="#{pedidoBean.addProducto(p)}" /></h2>
							
							<p>
								#{p.notas}
							</p>
							
							<span class="price">$#{p.precio}</span>
						</li>
                                            </ui:repeat>						
					</ul>
				</div>
			</div>
		</div>
                </p:outputPanel>
		<div class="sidebar">
			<h1>Menu</h1>
			<ul class="navigation">
                            <ui:repeat value="#{menuBean.categorias}" var="c">
                                <li>
                                    <h:commandLink value="#{c.descripcion}">
                                        <f:setPropertyActionListener value="#{c}" target="#{menuBean.selected}"/>
                                    </h:commandLink>
                                    
                                </li>
                            </ui:repeat>
			</ul>
                </div>	
	</div>
            </ui:define>

        </ui:composition>

    </body>
</html>
